<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-data-table
            :headers="headers"
            :items="productions"
            item-key="pid"
            class="elevation-1"
            disable-filtering
            show-expand
            :loading="loading"
            :options.sync="options"
            :server-items-length="total"
            loading-text="正在加载~"
            no-data-text="没有数据"
            no-results-text="找不到哦"
            :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数'}"
        >
          <template v-slot:top>
            <v-toolbar flat color="secondary">
              <template v-slot:extension>
<!--                搜索条件表单-->
                <v-row class="mt-1">
                  <v-col cols="3">
                    <v-select height="20"
                              dense
                              clearable
                              outlined
                              label="品牌"
                              v-model="searchBrand"
                              :items="brands"
                              item-text="valueName"
                              item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="3">
                    <v-select height="20"
                              dense
                              clearable
                              outlined
                              label="产品类型"
                              v-model="searchType"
                              :items="types"
                              item-text="valueName"
                              item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="3">
                    <v-select height="20"
                              dense
                              clearable
                              outlined
                              chips
                              label="产品适合肤质"
                              v-model="searchSkinType"
                              multiple
                              :items="skinTypes"
                              item-text="valueName"
                              item-value="value"
                              hint="默认适合所有肤质"
                              @change="updateSkinType"
                    ></v-select>
                  </v-col>
                  <v-col cols="3">
                    <v-text-field height="20"
                                  clearable
                                  dense
                                  v-model="searchProduction"
                                  outlined
                                  label="产品名称"
                                  @keypress.enter.stop="getProductions"
                    >
                      <template v-slot:append-outer>
                        <v-icon @click="getProductions">
                          mdi-magnify
                        </v-icon>
                      </template>
                    </v-text-field>
                  </v-col>
                </v-row>
              </template>
              <v-toolbar-title>产品管理</v-toolbar-title>
              <v-spacer></v-spacer>

              <v-btn icon @click="gotoNewProduction">
                <v-icon>mdi-plus-circle-outline</v-icon>
              </v-btn>
            </v-toolbar>
          </template>
          <template v-slot:expanded-item="{ headers, item }">
            <!--            子菜单 表格-->
            <td :colspan="headers.length" class="pa-0" style="height: 110px">
              <v-row justify="center" class="full-width" style="height: 100px">
                <v-col cols="auto" class="pa-1" v-for="(imgUrl,i) in existedImgs(item)" :key="i">
                  <v-card :height="picScale" :width="picScale" >
                    <v-img :height="picScale" :width="picScale" :src="imgUrl" @click="showImg(imgUrl)">
                    </v-img>
                  </v-card>
                </v-col>
              </v-row>
            </td>
          </template>
          <template v-slot:item.actions="{ item }">
            <v-icon
                class="mr-2"
                @click="goEditProduction(item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
                @click="simpleCopy(item,formDel);DelDialog=true"
            >
              mdi-delete
            </v-icon>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
<!--    展示大图-->
    <show-big-image
        :show="showBigImg"
        :src="imgSrc"
        @dismiss="showBigImg =false"
    >

    </show-big-image>
    <!--    删除产品信息-->
    <v-dialog
        v-model="DelDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          确认删除 {{ formDel.title }} 吗？
        </v-card-title>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="DelDialog = false">取消</v-btn>
          <v-btn color="red" dark @click="delProduction(formDel)">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import {rules,simpleCopy} from "../../util/util";
import {baseUrl, imgPrefixUrl} from "../../myConfig";
import ShowBigImage from "../../components/ShowBigImage";


export default {
  name: "ProductionManage",
  components:{ShowBigImage},
  data: () => ({
    rules: rules,
    AddAdminDialog: false,
    DelAdminDialog: false,
    searchProduction: '',
    searchBrand: '',
    searchType: '',
    searchSkinType: [],
    headers: [
      {text: '产品名称', value: 'title', align: 'center', sortable: false},
      {text: '品牌', value: 'brandName', align: 'center', sortable: false},
      {text: '产品类型', value: 'type', align: 'center', sortable: false},
      {text: '产品规格', value: 'size', align: 'center', sortable: false,},
      {text: '产品参考价格', value: 'price', align: 'center', sortable: false,},
      {text: '产品主要功效', value: 'usage', align: 'center', sortable: false,},
      {text: '产品适合肤质', value: 'forSkin', align: 'center', sortable: false,},
      {text: '创建时间', value: 'createTime', align: 'center', sortable: false,},
      {text: '操作', value: 'actions', align: 'center', sortable: false,},
      {text: '', value: 'data-table-expand', align: 'center', sortable: false,},
    ],
    productions: [],
    formDel: {
      pid: '',
      title:'',
    },
    options: {},
    total: 0,
    loading: false,
    skinTypes: [],
    types: [],
    brands: [],
    picScale: 95,
    showBigImg:false,
    imgSrc:false,
    DelDialog:false,
  }),
  watch: {
    options: {
      handler() {
        this.getProductions()
      },
      deep: true,
    },
  },
  methods: {
    simpleCopy,
    gotoNewProduction() {
      this.$emit('newTab', {title: '新建产品', route: '/admin/newProduction'})
    },
    getProductions() {
      this.loading = true
      const {sortBy, sortDesc, page, itemsPerPage} = this.options
      let data = {
        title: this.searchProduction,
        fitSkins: this.searchSkinType,
        type: this.searchType,
        brand: this.searchBrand,
        page: page,
        row: itemsPerPage
      }
      this.$http.post('production/listProduction', data).then(res => {
        this.productions = res.data?res.data:[]
        this.total = res.total
        this.loading = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.loading = false
      })
    },
    getKeyValues(key, store) {
      let data = {
        key: key
      }
      this.$http.post('constant/listConstant', data).then(res => {
        this[store] = res.data[0].values
      }).catch(res => {
        this[store] = []
      })
    },
    updateSkinType() {
      this.searchSkinType = this.skinTypes.map(a => a.value).filter(a => this.searchSkinType.indexOf(a) !== -1)
    },
    showImg:function (img){
      this.showBigImg = true
      this.imgSrc = img
    },
    existedImgs(item){
      if (item.pictureList){
        return item.pictureList.map(a=>baseUrl+imgPrefixUrl+a)
      }else{
        return []
      }
    },
    goEditProduction(item){
      this.$emit('newTab', {title: '修改产品', route: '/admin/editProduction?pid='+item.pid})
    },
    delProduction(){
      let data = this.formDel
      this.$http.post('production/deleteProduction', data).then(res => {
        this.getProductions()
        this.DelDialog = false
        this.$emit("toast","删除成功")
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.DelDialog = false
        this.loading = false
      })
    }
  },
  mounted() {
    this.getProductions()
    this.getKeyValues('skinType', 'skinTypes')
    this.getKeyValues('productionType', 'types')
    this.getKeyValues('productionBrand', 'brands')
  },
  computed:{

  }
}
</script>

<style scoped>

</style>
